<template>
    <teleport to="#message">
        <div class="alert message-info fixed-top w-50 mx-auto d-flex justify-content-between mt-2" :class="classObject"
            role="alert" v-if="isVisible">
            <strong>{{ message }}</strong>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
                @click.prevent="closeMessage"></button>
        </div>
    </teleport>
</template>
<script lang='ts' setup>
import { PropType, ref } from 'vue';
import useDOMCreate from '@/hooks/useDOMCreate'

type MessageType = 'success' | 'error' | 'default'
const props = defineProps({
    message: String,
    type: {
        type: String as PropType<MessageType>,
        default: 'default'
    }
})

const emits = defineEmits(['close-message'])

useDOMCreate('message')

const isVisible = ref(true)
const classObject = {
    'alert-success': props.type === 'success',
    'alert-danger': props.type === 'error',
    'alert-primary': props.type === 'default',
}

const closeMessage = () => {
    isVisible.value = false
    emits('close-message', true)
}
</script>
<style lang='scss'>
</style>
